<!DOCTYPE html>
<html lang="en">
<head th:include="public/public_css::public_css ('用户管理')" />
<body style="background-color: #f2f2f2;">
<div class="layui-fluid larry-wrapper">
    <div class="layui-card">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs24">
                <form class="layui-form layui-card-header  layui-card-header-auto" id="searchForm">
                    <div class="layui-inline">
                        <label class="layui-form-label">包装名称</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="bzmc" id="test2" placeholder="包装名称" />
                        </div>
                    </div>
                    <div class="layui-inline inline-search-btn">
                        <a class="layui-btn layui-btn-normal" data-type="reload">搜索</a>
                    </div>
                    <div class="layui-inline inline-reset-btn">
                        <button type="reset" class="layui-btn layui-btn-primary" style="background-color: #1e9fff; color: white;">重置</button>
                    </div>
                </form>
                <input type="hidden" id="test" name="cjsj_start">
                <input type="hidden" id="tests" name="cjsj_start">
               <!-- <div style="    position: relative; z-index: 9999; top: 53px; margin-left: 100px;">
                    <a type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="test"><i class="layui-icon"></i>包装导入</a>
                    <a type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="tests" style=" margin-left: 20px;"><i class="layui-icon"></i>包装明细导入</a>
                    &lt;!&ndash; <div class="layui-upload-list">
                         <table class="layui-table" id="tab9">
                             <thead>
                             <tr>
                                 <th>文件名</th>
                                 <th>大小</th>
                                 <th>状态</th>
                                 <th>操作</th>
                             </tr>
                             </thead>
                             <tbody id="demoList"></tbody>
                         </table>
                     </div>&ndash;&gt;
                </div>-->
                <div class="group-button tpl-button" id="toolbar"></div>
                <!--列表-->
                <section class="panel panel-padding layui-card-body" >
                    <div class="pro">
                        <table id="table"></table>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

<div id="uploadDialog" style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr><th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr></thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
    </div>
</div>
</body>

</body>

<div th:include="public/public_js::public_js"></div>
<div th:include="public/public_btn::public_btn"></div>

<style>
    #uploadDialog{
        display: none;
    }
</style>
<script th:inline="javascript">
    $(function () {

        $('.js-data-example-ajax').select2({
            ajax: {
                url: '/zxbzwms/wmsgoodstype/getWmsGoodsTypeByHzId',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        mc: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr= new Array();
                    if(data){
                        for (var i=0;i<data.length;i++){
                            arr.push({id:data[i].id,text:data[i].mc});
                        }
                    }
                    console.log(arr);
                    // Tranforms the top-level key of the response object from 'items' to 'results'
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请输入查询字段',
            allowClear: true
        });
        $(".moreBtn").on("click",function () {
            $(".moreSearch").toggle();
        })
    });

    $('#testupload').click(function () {
        layer.open({
            type: 1
            ,title: false //不显示标题栏
            ,closeBtn: false
            ,area: ['50%', '60%']
            ,shade: 0.2
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['好']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: $('#uploadDialog')
        });
    })

    var functions = [[${functions}]];
    layui.use(['list','layer','zzpUtils','jquery','laydate', 'tablebutton','upload'],function () {
//        window.operateEvent ={
//            "click #editRow":function (e, value, row, index) {
//                editDialog(row.id);
//            },
//            "click #pile":function (e, value, row, index) {
//                pileDialog(row.id);
//            }
//        }

        var zzpUtils= layui.zzpUtils,
            $ = layui.jquery,
            laydate = layui.laydate,
            tablebtn = layui.tablebutton;
           upload = layui.upload;
        zzpUtils.webSocket.init();

        //执行实例
        var uploadInst = upload.render({
            elem: '#test' //绑定元素
            ,url: '/zxsdwms/file/upload' //上传接口
            ,exts: 'xls|xlsx'
            ,accept: 'file'
            ,done: function(res){
                console.info("res");
                console.info(res);
                //上传完毕回调
                zzpUtils.action({
                    url: "/wmspacking/importPackingExcle",
                    data: res.filePath,
                    success: function (data) {
                        setTimeout(function () {
                            if (data.type == 'success') {
                                layer.msg(data.title + '<br>' + data.message);

                            } else {
                                layer.msg(data.title + '<br>' + data.message);
                            }
                        }, 500);
                        zzpUtils.refreshTable("#table");
                    }, error: function (xhr, textStatus) {
                        console.log(textStatus);
                        console.log(xhr)
                    }
                })
            }

            ,error: function(){
                //请求异常回调
            }
        });
        //执行实例
        var uploadInst2 = upload.render({
            elem: '#tests' //绑定元素
            ,url: '/zxsdwms/file/upload' //上传接口
            ,exts: 'xls|xlsx'
            ,accept: 'file'
            ,done: function(res){
                console.info("res");
                console.info(res);
                //上传完毕回调
                zzpUtils.action({
                    url: "/wmspacking/importPackingmxExcle",
                    data: res.filePath,
                    success: function (data) {
                        setTimeout(function () {
                            if (data.type == 'success') {
                                layer.msg(data.title + '<br>' + data.message);

                            } else {
                                layer.msg(data.title + '<br>' + data.message);
                            }
                        }, 500);
                        zzpUtils.refreshTable("#table");
                    }, error: function (xhr, textStatus) {
                        console.log(textStatus);
                        console.log(xhr)
                    }
                })
            }

            ,error: function(){
                //请求异常回调
            }
        });
        tablebtn.buildOnClick({
            type: 1,
            temp: $("#function_tpl"),
            functions: functions.headBtn,
            row: null,
            event: {
                // 查看
                searchEvent: function(data){
                    console.log("点查询了", data.row);
                    pileDialog(data.row);
                },
                /*新增*/
                addEvent: function (data) {
                    zzpUtils.dialog({
                        title:"添加包装",
                        type:2,
                        content: "/base/AddBaozhuang",
                        btn:[],
                        end: function () {
                            console.log('dialog关闭回调');
                            $('#table').bootstrapTable('refresh');
                        }
                    });
                },
                /*编辑*/
                editEvent: function (data) {
                    if (data.row != undefined) {
                        editDialog(data.row.id);
                    }
                },

                /*包装导入*/
                importEvent:function (data) {
                    $("#test").show();
                    document.getElementById("test").click();

                },
                /*包装明细导入*/
                exportEvent:function (data) {
                    $("#tests").show();
                    document.getElementById("tests").click();

                },
            }
        });

        function editDialog(id){
            localStorage.id = id;
            zzpUtils.dialog({
                title:"修改包装信息",
                type:2,
                data:{
                    id:id
                },
                content: "/base/EditBaozhuang",
                end: function () {
                    console.log('dialog关闭回调');
                    $('#table').bootstrapTable('refresh');
                }
            });
            console.log('dialog打开');
        }

        function pileDialog(id){
            localStorage.id = id;
            zzpUtils.dialog({
                title:" 查看堆码信息",
                type:2,
                content: "/base/ViewPile",
                area: ['50%', '60%']
            });
        }

        laydate.render({
            elem: '#test5'
            ,theme: '#20a0ff'
        })
        // 主页面table
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination:true,
            isOperate: true,
            url: '/wmspacking/list',
            columns: [
               /* {field: '', checkbox: true},*/
                {field: "hzmc", title: "货主名称"},
                {field: "bzmc", title: "包装名称"},
                {field: "bzms", title: "包装描述"},
            ],
            queryParams: function () {//查询条件
                return  zzpUtils.getFormJson($("#searchForm"));
            },
            operateFormatter: operateFormatter

        });


//        function operateFormatter(value, row, index) {
//            return [
//                '<a class="layui-btn layui-btn-xs" id="editRow">编辑</a>',
//                '<a class="layui-btn layui-btn-danger layui-btn-xs" id="pile">堆码</a>'
//            ].join('')
//        }
        /*表格右侧按钮*/
        function operateFormatter(value, row, index) {
            var btn = '', button = '', buttons1 = '', buttons2 = '';
            for (var i = 0; i < functions.tableBtn.length; i++) {
                var item = functions.tableBtn[i];
                //更多之外
                buttons1 += '<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="' + item.event + '">'
                    + item.name
                    + '</button>';
            }

            return buttons1;
        }

        $(".inline-search-btn").on('click',function () {
            zzpUtils.refreshTable("#table");
        })
//        $(".add-btn").on('click',function () {
//            zzpUtils.dialog({
//                title:"添加包装",
//                type:2,
//                content: "/base/AddBaozhuang",
//                btn:[],
//            });
//        })

    });
</script>

</html>